// 关联员工组件
import React from 'react';
import { connect } from 'react-redux'
import {Modal, Button,message,Carousel,Form,Input,Select} from 'antd'
const FormItem = Form.Item
import {getStaffList,relatedSend,getRelatedStaff,untieSend} from 'actions/companyManage'//引用调用接口的方法
@Form.create({
    mapPropsToFields(props) {
      return {
        staffName: Form.createFormField({
          ...props.content,
          value: '',
        }),
      };
    } 
})
@connect(
    (state, props) => ({
      
    })
  )
class relatedStaff extends React.Component {
  constructor(props){
    super(props);
    this.state={
        staffList:[],
        isChoose:false
    }
  }
  componentWillReceiveProps(props){//在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
  }
  componentDidMount(){
   
  }
  componentWillMount() {
  }
  searchList(){
    //查询列表
    this.props.form.validateFields(['staffName'],(err, values)=>{
        if(!err){//表单校验
            if(this.props.type == 1){
                //查询所有未被绑定的 员工
                this.props.dispatch(getStaffList(
                {   
                    "userName":values.staffName
                },
                (respose) => {
                    this.setState({
                        staffList:respose.respData
                    })
                })) 
            }else{
                //查询这个公司所有已绑定的 员工
                this.props.dispatch(getRelatedStaff(
                {   
                    "userName":values.staffName,
                    "companyId":this.props.companyId
                },
                (respose) => {
                    this.setState({
                        staffList:respose.respData
                    })
                }))
            }
                
        }        
    })
  }
  changeList(value){
    //选择数据
    this.props.form.setFieldsValue({'staffName':value.label})
    this.setState({isChoose:true})
  }
  clearList(){//清空列表
    this.props.form.resetFields(['staffName','staffId'])
    this.setState({
        staffList:[],
        isChoose:false
    })
  }

  handleOk = (e) => {
    //查询列表 
    //判断是绑定还是解绑
    this.props.form.validateFields((err, values)=>{
        if(!err){
            if(!values.staffId){
                message.error('请选择员工');
                return;
            }
            if(this.props.type == 1){
                //关联员工
                this.props.dispatch(relatedSend(
                {   
                    "accountId":values.staffId.key,
                    "companyId":this.props.companyId
                },
                (respose) => {
                    message.success(respose.respMsg);
                    this.setState({
                        staffList:[],
                        isChoose:false
                    },()=>{
                        this.props.successModal();                   
                    })
                }))    
            }else{
                //解绑员工
                this.props.dispatch(untieSend(
                {   
                    "accountId":values.staffId.key,
                    "companyId":this.props.companyId
                },
                (respose) => {
                    message.success(respose.respMsg);
                    this.setState({
                        staffList:[],
                        isChoose:false
                    },()=>{
                        this.props.successModal();                   
                    })
                }))    
            }
             
        }        
    })
  }
  handleCancel = (e) => {
    this.props.closeModal();
  }

  render(){
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
    labelCol: {
        sm: { span: 4 },
        },
        wrapperCol: {
         sm: { span: 18 },
        },
    };
    return (
        <div>
            <Modal
                width={550}
                title={this.props.type == 1 ? "关联员工" : "解绑员工"}
                visible={this.props.visible}
                maskClosable={false}
                onCancel={this.handleCancel}
                onOk={this.handleOk}
                >
                <div>
                    <Form>
                        <FormItem label="员工" {...formItemLayout}>
                            {
                                getFieldDecorator('staffName', {
                                rules: [{
                                    required: true,message:"请输入姓名"
                                }],
                                })(
                                <Input placeholder="请输入关键字" disabled={this.state.isChoose}  size="default" style={{ width: '180px' }} />
                                )
                            }
                        <span style={{margin:"0 5px",cursor:"pointer"}} onClick={this.searchList.bind(this)}>搜索</span>                  
                        </FormItem>
                        <FormItem label="员工列表" {...formItemLayout}>
                            {
                                getFieldDecorator('staffId', {
                                rules: [{
                                    required: false,message:"请选择员工"
                                }],
                                })(
                                <Select placeholder="请选择员工"   labelInValue={true}   onSelect={this.changeList.bind(this)} style={{ width: 180 }} >
                                    {
                                    this.state.staffList.map((item,i)=> {
                                        return(
                                        <Select.Option value={item.id} key={i}>{item.userName}</Select.Option>
                                        )
                                    })
                                    }
                                </Select> 
                                )
                            }             
                        <span style={{marginLeft:"4px",cursor:"pointer"}} onClick={this.clearList.bind(this)}>重置</span>                  
                        </FormItem>
                    </Form>
                </div>
            </Modal>
        </div>
    )
  }
}
export default relatedStaff;